<script setup lang='ts'>
  import { reactive } from 'vue';
  const action = reactive({
    foldSet:true,
  })
  const handleFoldBut = ()=>{
    action.foldSet = !action.foldSet
  }
</script>

<template>
  <div :class="['ruleBack',action.foldSet?'retract':'expand']" class="ruleBack">
    <div class="titleBack flex-align-center">
      <div class="titleImg">
        <slot name="titleImg"></slot>
      </div>
      <div @click="handleFoldBut" class="but flex-align">
        <span>{{ action.foldSet?'收起':'展开' }}</span>
        <img
          class="iconImg"
          src="@/assets/images/icon13.png"
        >
      </div>
    </div>
    <div class="centBack">
      <slot></slot>
    </div>
  </div>
</template>

<style lang='scss' scoped>
  $titleImgHeigth:52px;
  .ruleBack {
    position: relative;
    padding: 0 6px;
    .titleBack {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: $titleImgHeigth;
      background: url('@/assets/images/titleback.png') left top / 100% 100% no-repeat;
      .titleImg {
        width: max-content;
        :deep(img) {
          width: auto;
          height: 20px;
        }
      }
      .but {
        position: absolute;
        top: 20px;
        right: 22px;
        span {
          color: #B74621;
          font-size: 12px;
          font-weight: 500;
          margin-right: 2px;
        }
        .iconImg {
          width: 12px;
          height: 12px;
          transition: transform .28s;
        }
        
      }
    }
    .centBack {
      min-height: 300px;
      padding: $titleImgHeigth 19px 20px;
      box-sizing: border-box;
      background: #070735;
      border-radius: 16px;
      border: 1px solid #FFFDE5;
      transition: min-height .38s, border-color .58s;
    }
  }
  .retract {
    .iconImg {
      transform: rotate(0);
    }
  }
  .expand {
    .centBack {
      overflow: hidden;
      height: $titleImgHeigth;
      min-height: $titleImgHeigth;
      padding-bottom: 0;
      border-color: rgba($color: #fff, $alpha: 0);
    }
    .iconImg {
      transform: rotate(180deg);
    }
  }
</style>